<template>
  <ul class='button-model'>
    <li v-for="(item,index) in buttonData" :class="item.class" @click="clickThis(item)">
      {{item.label}}
    </li>
  </ul>
</template>
<script>
export default {
  props:["buttonData"],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    getButtonData(){
      if(this.buttonData)console.error("没有传入buttonData")
      return this.buttonData
    }
  },
  methods: {
    clickThis(item){
      item.click(item)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.button-model {
  display: flex;
  justify-content: space-between;

  li{
    width: calc(50% - 7.5px);
    flex-grow: 1;
    text-align: center;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(left bottom,#FF6613,#FFA200);
    background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
  }
  li:nth-child(n+2){
    margin-left: 15px;
  }
  li:active{
    opacity: .8;
  }
}
</style>